<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      top="10vh"
      @closed="closed"
    >
      <el-form  :model="logForm"  >
        <el-form-item label-width="100px" label="日志标题" prop="title">
          <el-input v-model="logForm.title" placeholder="" autocomplete="off" disabled/>
        </el-form-item>

        <el-form-item label-width="100px" label="请求URI" prop="requestUri">
          <el-input v-model="logForm.requestUri" placeholder="" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label-width="100px" label="操作方式" prop="method">
          <el-input v-model="logForm.method" placeholder="" autocomplete="off" disabled />
        </el-form-item>

        <el-form-item label-width="100px" label="请求参数" prop="requestParams">
              <el-input type="textarea" v-model="logForm.requestParams"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="请求响应码" prop="responseCode">
          <el-input v-model="logForm.responseCode" placeholder="" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label-width="100px" label="响应信息" prop="responseMessage">
          <el-input v-model="logForm.responseMessage" placeholder="" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label-width="100px" label="响应内容" prop="responseContent">
            <b-code-editor v-model="logForm.responseContent"
            :auto-format="true"
            :smart-indent="true"
            theme="dracula"
            :indent-unit="4"
            :line-wrap="false"
            :gutter="true"
            />
        </el-form-item>
        <el-form-item label-width="100px" label="异常信息" prop="exception">
              <el-input type="textarea" v-model="logForm.exception"></el-input>
        </el-form-item>

        <el-form-item label-width="100px" label="操作IP" prop="remoteIp">
          <el-input v-model="logForm.remoteIp" placeholder="" autocomplete="off" disabled />
        </el-form-item>

        <el-form-item label-width="100px" label="操作用户" prop="createBy">
          <el-input v-model="logForm.createBy" placeholder="" autocomplete="off" disabled />
        </el-form-item>


        <el-form-item label-width="100px" label="响应耗时" prop="time">
          <el-input v-model="logForm.time" placeholder="" autocomplete="off" disabled />
        </el-form-item>


        <el-form-item label-width="100px" label="操作时间" prop="createTime">
          <el-input v-model="logForm.createTime" placeholder="" autocomplete="off" disabled />
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="loading" @click="closed">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getLogById
  } from '@/api/system/log'
import {
  isOk
} from '@/utils/request'

export default {
  name: 'ViewOperaDialog',
  props: {
    properties: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      title: '查看日志',
      loading: false,
      id:'',
      logForm:{

      }
    }
  },
  computed: {

  },
  watch:{
    properties: {
      handler: function(value) {
        this.visible = value.visible
        if (value.data) {
          this.id= value.data.id
        } else {
          this.id=''
        }
      },
      immediate: true,
      deep: false
    }
  },
  mounted: function() {
  },
  created() {
    this.loading = true
    getLogById({
      id: this.id
    }).then(rsp => {
      this.loading = false
      if (rsp.code === 200) {
        this.logForm=rsp.data
      }
    }).catch(err => {
       console.log(err);
    }).finally(() => {
      this.loading = false
    })
  },
  methods: {
    closed: function() {
      this.logForm={}
      this.$emit('closed', false)
    }
  }
}
</script>

<style lang="scss">
  .info-dialog {

  }
</style>
